<template>
  <div>
    <r-search :searchHandle="searchHandleAdd" />
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isSelection="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    var checkpass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Enter Again PassWord"));
      } else if (value !== this.formDataEditPsw.password) {
        callback(new Error("The password is not the same!"));
      } else {
        callback();
      }
    };
    return {
      searchData: {
        goodsNo: "",
        goodsName: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "goodsNo",
          placeholder: "商品编号",
          width: 170
        },
        {
          type: "input",
          prop: "goodsName",
          placeholder: "商品Name",
          width: 170
        }
      ],
      searchHandleAdd: [
        {
          label: "Add商品",
          type: "success",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormVisible()
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "商品编号",
          prop: "goodsNo"
        },
        {
          label: "商品Name",
          prop: "goodsName"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "商品图片",
          prop: "img",
          type: "image"
        },
        {
          label: "折扣情况",
          prop: "discountInfo",
          width: 215,
          formatter: e =>
            (e.discountInfo &&
              JSON.parse(e.discountInfo)
                .map(item => {
                  return (
                    item.startTime +
                    "至" +
                    item.endTime +
                    "____" +
                    item.discount +
                    "折\r"
                  );
                })
                .join(",")) ||
            "None"
        },
        {
          label: "Creation Time",
          prop: "ctime",
          width: 200
        },
        {
          label: "Operations",
          type: "button",
          width: 250,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              size: "mini",
              // isShow: e => e.orderId == '123' ? true : false,
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "primary",
              size: "mini",
              handle: row =>
                this.TableDel("/activeGoodsDel", { id: row.id }, "del")
            },
            {
              label: "折扣管理",
              type: "primary",
              size: "mini",
              handle: row =>
                this.$router.push({
                  path: "/discount-goodsDiscount",
                  query: { id: row.id, activeId: this.$route.query.id }
                })
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        activeName: ""
        // startDate: "",
        // endDate: "",
        // status: ""
      },
      formCols: [
        {
          type: "select",
          label: "商品Name",
          placeholder: "Please Select商品",
          width: 350,
          prop: "goods",
          options: []
        }
        // { type: "dateTime", label: "商品周期Start Time", placeholder: 'Please SelectStart Time', width: 350, prop: "startTime", },
        // { type: "dateTime", label: "商品周期End Time", placeholder: 'Please select the end time', width: 350, prop: "endTime", },
        // { type: "input", label: "折扣", placeholder: 'Please Input商品Name', width: 350, prop: "discount", },
        // { type: "select", label: "Status", placeholder: 'Please SelectStatus', width: 350, prop: "status",options:[{label:'Enable',value:1},{label:'Forbidden',value:2}] },
      ],
      formRules: {
        activeGoodsId: [
          { required: true, message: "Please Input商品Name", trigger: "blur" }
        ]
        // startTime: [{ required: true, message: 'Please SelectStart Time', trigger: 'blur' },],
        // endTime: [{ required: true, message: 'Please select the end time', trigger: 'blur' },],
        // discount: [{ required: true, message: 'Please Input商品Name', trigger: 'blur' }],
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.tablePage.offset = this.tablePage.page;
      let param = {
        ...this.searchData,
        ...this.tablePage,
        activeId: this.$route.query.id
      };
      // console.log(param);
      let res = await this.api.activegoods(param);
      if (res) {
        this.tablePage.total = res.data.total;
        this.tableData = res.data.list;
      }
      this.formCols[0].options = [];
      let resgoods = await this.api.getGoodsList({});
      if (resgoods) {
        for (let i = 0; i < resgoods.data.length; i++) {
          this.formCols[0].options.push({
            label: resgoods.data[i].goodsNo + resgoods.data[i].goodsName,
            value: JSON.stringify(resgoods.data[i])
          });
        }
      }
    },
    async elFormSubmit() {
      this.formData.account = this.formData.phone;
      if (this.formData.id) {
        let obj = JSON.parse(this.formData.goods);
        let res = await this.api.activegoodsupdate({
          id: this.formData.id,
          goodsNo: obj.goodsNo,
          goodsName: obj.goodsName,
          img: obj.img,
          activeId: this.$route.query.id * 1
        });
        if (res) {
          this.formData.id = "";
          this.elFormVisible();
          this.init();
        }
      } else {
        let obj = JSON.parse(this.formData.goods);
        let res = await this.api.activegoodsadd({
          goodsNo: obj.goodsNo,
          goodsName: obj.goodsName,
          img: obj.img,
          activeId: this.$route.query.id * 1
        });
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
